<script setup lang="ts">
import { onClickOutside } from "@vueuse/core";
import { onMounted, ref } from "vue";
import ElSvgIcon from "@/components/el-svg-icon/el_svg_icon_index.vue";

const inputValue = defineModel<string>({
    default: "",
});

const visible = ref(false); // 弹窗显示状态

const allIconNames: string[] = []; // 所有的图标名称集合

const filterValue = ref(""); // 筛选的值
const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合

const iconSelectorRef = ref();
const iconSelectorDialogRef = ref();
/**
 * icon 加载
 */
function loadIcons() {
    const icons = import.meta.glob("../../assets/svg_icons/*.svg");
    for (const icon in icons) {
        const iconName = icon.split("assets/svg_icons/")[1].split(".svg")[0];
        //assets/svg_icons/api.svg =>  iconName=api
        allIconNames.push(iconName);
    }
    filterIconNames.value = allIconNames;
}

/**
 * icon 筛选
 */
function handleFilter() {
    if (filterValue.value) {
        filterIconNames.value = allIconNames.filter((iconName) =>
            iconName.includes(filterValue.value)
        );
    } else {
        filterIconNames.value = allIconNames;
    }
}

/**
 * icon 选择
 */
function handleSelect(iconName: string) {
    inputValue.value = iconName;
    visible.value = false;
}

/**
 * 点击容器外的区域关闭弹窗 VueUse onClickOutside
 */
onClickOutside(iconSelectorRef, () => (visible.value = false), {
    ignore: [iconSelectorDialogRef],
});

onMounted(() => {
    loadIcons();
});
</script>

<template>
    <div ref="iconSelectorRef" class="iconselect-container">
        <el-input
            v-model="inputValue"
            readonly
            placeholder="点击选择图标"
            @click="visible = !visible"
        >
            <template #prepend>
                <ElSvgIcon :a-icon-name="inputValue" />
            </template>
        </el-input>

        <el-popover
            shadow="none"
            :visible="visible"
            placement="bottom-end"
            trigger="click"
            width="400"
        >
            <template #reference>
                <div class="selector" @click="visible = !visible">
                    <el-icon-carettop v-show="visible" />
                    <el-icon-caretbottom v-show="!visible" />
                </div>
            </template>

            <!-- 下拉选择弹窗 -->
            <div ref="iconSelectorDialogRef">
                <el-input
                    v-model="filterValue"
                    class="p-2"
                    placeholder="搜索图标"
                    clearable
                    @input="handleFilter"
                />
                <el-divider border-style="dashed" />

                <el-scrollbar height="300px">
                    <ul class="icon-list">
                        <li
                            v-for="(iconName, index) in filterIconNames"
                            :key="index"
                            class="icon-item"
                            @click="handleSelect(iconName)"
                        >
                            <el-tooltip
                                :content="iconName"
                                placement="bottom"
                                effect="light"
                            >
                              <div style="width: 100%;height: 100%;text-align: center;padding:5px"
                              >
                                <ElSvgIcon
                                    color="var(--el-text-color-regular)"
                                    :a-icon-name="iconName"
                                />
                              </div>
                                
                            </el-tooltip>
                        </li>
                    </ul>
                </el-scrollbar>
            </div>
        </el-popover>
    </div>
</template>

<style scoped lang="scss">
.el-divider--horizontal {
    margin: 10px auto !important;
}

.iconselect-container {
    position: relative;
    width: 400px;

    .selector {
        color: #999;
        position: absolute;
        right: 10px;
        top: 0;
        height: 32px;
        width: 20px;
        font-size: 20px;
        line-height: 32px;
        cursor: pointer;
    }
}

.icon-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    margin-top: 10px;

    .icon-item {
        display: flex;
        flex-direction: column;
        place-items: center center;
        width: 10%;
        padding: 0;
        margin: 0 10px 10px 0;
        cursor: pointer;
        border: 1px solid #ccc;

        &:hover {
            color: var(--el-color-primary);
            border-color: var(--el-color-primary);
            transition: all 0.2s;
            transform: scaleX(1.1);
        }
    }
}
</style>
